<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎页</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
</head>
<body class="body">

<div class="layui-row layui-col-space10 my-index-main">

    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">本月销售计划</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-progress layui-progress-big" lay-showPercent="true">
                        <div class="layui-progress-bar layui-bg-green" lay-percent="30%"></div>
                    </div>
                    <br/>
                    <div class="layui-progress layui-progress-big" lay-showPercent="true">
                        <div class="layui-progress-bar layui-bg-red" lay-percent="65%"></div>
                    </div>
                    <br/>
                    <div class="layui-progress layui-progress-big" lay-showPercent="true">
                        <div class="layui-progress-bar layui-bg-orange" lay-percent="35%"></div>
                    </div>
                    <br/>
                    <div class="layui-progress layui-progress-big" lay-showPercent="true">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">职员简介</h2>
                <div class="layui-colla-content layui-show">

                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col width="170">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>昵称</th>
                            <th>职位</th>
                            <th>加入时间</th>
                            <th>签名</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>张昌恩</td>
                            <td style="width: 60px">首席拔罐师</td>
                            <td style="width: 100px">2016-11-29</td>
                            <td>拔罐我是专业的</td>
                        </tr>
                        <tr>
                            <td>玛利亚</td>
                            <td>一级按摩师</td>
                            <td>2014-10-28</td>
                            <td>于千万人之中我遇见了你,让我们一起好好享受这美妙时光</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">本月优惠</h2>
                <div class="layui-colla-content layui-show">

                    <ul class="layui-timeline max-auto">
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">按摩服务</h3>
                                <p>
                                    更新日期:2018-09-11
                                </p>
                                <ul>
                                    <li>新来大量按摩师供您选择,加入会员打八折</li>
                                </ul>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">养生服务</h3>
                                <p>更新时间:2018-09-10</p>
                                <ul>
                                    <li>新增微电流仪器,提拉瘦身瘦腿减脂,现在只要599</li>
                                    <li>首席拔罐师张师傅为您排毒养颜,现在只要998</li>
                                </ul>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">图表</h2>
                <div class="layui-colla-content layui-show">
                    <div id="main-line" style="height: 450px;width: 200px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">注册</h2>
                <div class="layui-colla-content layui-show">

                    <form class="layui-form max-auto" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入内容"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" required lay-verify="required"
                                       placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">家庭住址</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                    <option value="2">广州</option>
                                    <option value="3">深圳</option>
                                    <option value="4">杭州</option>
                                    <option value="5">西安</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">兴趣爱好</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="like[write]" title="写作">
                                <input type="checkbox" name="like[read]" title="阅读" checked>
                                <input type="checkbox" name="like[dai]" title="发呆">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男">
                                <input type="radio" name="sex" value="女" title="女" checked>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">个性签名</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../frame/echarts/echarts.min.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'table', 'layer', 'vip_tab'], function () {
        var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTab = layui.vip_tab
                , element = layui.element
                , $ = layui.jquery;
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main-line'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title : {
                text: '销售报表',
                subtext: '数据对比'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['商品','业务']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['一季度','二季度','三季度','四季度']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'商品',
                    type:'bar',
                    data:[12.0, 43.9, 25.6, 56.7],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'业务',
                    type:'bar',
                    data:[22.6, 15.9, 70.7, 48.7],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 70.7, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 15.9, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        });
        // 打开选项卡
        $('.my-nav-btn').on('click', function(){
            if($(this).attr('data-href')){
                //vipTab.add('','标题','路径');
                vipTab.add($(this),'<i class="layui-icon">'+$(this).find("button").html()+'</i>'+$(this).find('p:last-child').html(),$(this).attr('data-href'));
            }
        });
        // you code ...
    });
</script>
<script >
    // $(function () {
    //     // 基于准备好的dom，初始化echarts实例
    //     var myChart = echarts.init(document.getElementById('main-line'));
    //     // 使用刚指定的配置项和数据显示图表。
    //     myChart.setOption({
    //         title : {
    //             text: '销售报表',
    //             subtext: '数据对比'
    //         },
    //         tooltip : {
    //             trigger: 'axis'
    //         },
    //         legend: {
    //             data:['商品','业务']
    //         },
    //         toolbox: {
    //             show : true,
    //             feature : {
    //                 dataView : {show: true, readOnly: false},
    //                 magicType : {show: true, type: ['line', 'bar']},
    //                 restore : {show: true},
    //                 saveAsImage : {show: true}
    //             }
    //         },
    //         calculable : true,
    //         xAxis : [
    //             {
    //                 type : 'category',
    //                 data : ['一季度','二季度','三季度','四季度']
    //             }
    //         ],
    //         yAxis : [
    //             {
    //                 type : 'value'
    //             }
    //         ],
    //         series : [
    //             {
    //                 name:'商品',
    //                 type:'bar',
    //                 data:[12.0, 43.9, 25.6, 56.7],
    //                 markPoint : {
    //                     data : [
    //                         {type : 'max', name: '最大值'},
    //                         {type : 'min', name: '最小值'}
    //                     ]
    //                 },
    //                 markLine : {
    //                     data : [
    //                         {type : 'average', name: '平均值'}
    //                     ]
    //                 }
    //             },
    //             {
    //                 name:'业务',
    //                 type:'bar',
    //                 data:[22.6, 15.9, 70.7, 48.7],
    //                 markPoint : {
    //                     data : [
    //                         {name : '年最高', value : 70.7, xAxis: 7, yAxis: 183},
    //                         {name : '年最低', value : 15.9, xAxis: 11, yAxis: 3}
    //                     ]
    //                 },
    //                 markLine : {
    //                     data : [
    //                         {type : 'average', name : '平均值'}
    //                     ]
    //                 }
    //             }
    //         ]
    //     });
    // })
</script>
</body>
</html>